<template>
    <el-dialog 
        :visible.sync="typeControlTrigger" 
        top="10rem"
        width="50%"
        custom-class="badReasonBox"
        :close="dialogClosed"
    >
        <div class="common-table-title">
            <div class="common-table-icon"></div>
            <div class="common-table-fl">不良原因类型</div>
        </div>
        <div class="createBtn" @click="openCreateWindow">新建</div>
        <div class="typeList">
            <el-row class="common-table-con">
                <el-table
                    :data="typeList"
                    :row-style="selectedHighlight"
                    max-height="285"
                    @selection-change="handleSelectionChange"
                >
                    <el-table-column
                        type="selection"
                        width="80"
                        align="center"
                    />
                    <el-table-column
                        label="编辑"
                        width="80"
                        align="center"
                    >
                        <template slot-scope="scope">
                            <div @click="openEditWindow(scope.row)" class="editBtn">
                                编辑
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        v-for="(item, index) in badReasonTypeItmes"
                        :key="index"
                        :prop="item.prop"
                        :label="item.label"
                        :min-width="item.width"
                        align="center"
                    />
                </el-table>
            </el-row>
        </div>
        <!-- 二级弹出窗 -->
        <el-dialog 
            :visible.sync="createTrigger" 
            top="12rem"
            width="40%"
            :modal='false'
            custom-class="typeControlSecBox"
            :close="dialogClosed"
        >
            <div class="common-table-title">
                <div class="common-table-icon"></div>
                <div class="common-table-fl">{{secondDialogTitle}}</div>
            </div>
            <div class="secBoxInput">
                <label style="margin-right: 1rem;">分类名称</label>
                <el-input
                    v-model="typeName"
                    placeholder="请填写不良名称"
                    type="text"
                    size="small"
                    style="width: 20rem"
                />
            </div>
            <div class="saveBtn" @click="saveType">保存</div>
        </el-dialog>
    </el-dialog>
</template>
<script>
    import { addBadReason, addReasonTypeName, editReasonTypeName } from '../axios.js'
    import pagedata from '../datas.js'
    export default {
        data() {
            return {
                // 显示/隐藏弹框
                typeControlTrigger: false,
                // 选中项的数组
                TableSelectData: [],
                // 列表项
                badReasonTypeItmes: pagedata.badReasonTypeItmes,
                // 新建窗口
                createTrigger: false,
                // 二级弹窗标题
                secondDialogTitle: '',
                // 不良原因名称新建/编辑
                typeNameMode: '',
                // 不良原因名称输入框
                typeName: '',
                // 修改的不良原因
                targetData: {}
            }
        },
        props: {
            typeList: {
                type: Array,
                default: () => [],
                required: true
            }
        },
        methods: {
            // 关闭不良原因类型列表
            dialogClosed() {
                this.typeControlTrigger = false
            },
            // 打开不良原因类型列表
            opendialog() {
                this.typeControlTrigger = true
            },
            handleSelectionChange (selection) {
                // 选中的数组
                this.TableSelectData = selection;
            },
            // 如果选中则添加高亮样式
            selectedHighlight (data) {
                if (this.TableSelectData.indexOf(data.row) > -1) {
                    return {
                        "background-color": "#FEF6EE"
                    };
                }
            },
            // 打开新建不良原因弹窗
            openCreateWindow() {
                this.typeNameMode = 'create'
                this.typeName = ''
                this.secondDialogTitle = '新建不良原因'
                this.createTrigger = true
            },
            openEditWindow(data) {
                console.log(data, 'data')
                this.typeNameMode = 'edit'
                this.typeName = data.value
                this.targetData = data
                this.secondDialogTitle = '编辑不良原因'
                this.createTrigger = true
            },
            // 新建&编辑分类名称保存按钮
            async saveType() {
                let duplicateName = false
                this.typeList.forEach(ele => {
                    if(ele.value === this.typeName) {
                        duplicateName = true
                    }
                });
                if(duplicateName) {
                    this.$message({
                        showClose: true,
                        message: '已有相同类型名字',
                        type: 'warning'
                    });
                    return false
                }
                // 新增
                if(this.typeNameMode === 'create') {
                    let param = {
                        createBy: 1,
                        parentId: 0,
                        sort: 0,
                        value: this.typeName
                    }
                    addReasonTypeName(param).then(res => {
                        if(res.data.status === 200) {
                            this.$message({
                                showClose: true,
                                message: '新增成功',
                                type: 'success'
                            });
                            // 修改成功，更新列表
                            this.$emit('updateList')
                        }else {
                            this.$message({
                                showClose: true,
                                message: res.data.msg,
                                type: 'error'
                            });
                        }
                    }).catch(err => {
                        console.log('err: ', err)
                        this.$message({
                            showClose: true,
                            message: '新增失败',
                            type: 'error'
                        });
                    })
                    this.createTrigger = false
                }
                // 编辑
                if(this.typeNameMode === 'edit') {
                    let param = {
                        id: this.targetData.id,
                        updateBy: 1,
                        value: this.typeName
                    }
                    editReasonTypeName(param).then(res => {
                        if(res.data.status === 200) {
                            this.$message({
                                showClose: true,
                                message: '修改成功',
                                type: 'success'
                            });
                            // 修改成功，更新列表
                            this.$emit('updateList')
                        }else {
                            this.$message({
                                showClose: true,
                                message: res.data.msg,
                                type: 'error'
                            });
                        }
                    }).catch(err => {
                        console.log('err: ', err)
                        this.$message({
                            showClose: true,
                            message: '修改失败',
                            type: 'error'
                        });
                    })
                    this.createTrigger = false
                }
            }
        },
        mounted() {

        },
    }
</script>
<style scoped>
    .typeList{
        width: 100%;
        height: 25rem;
        margin-top: 2rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    }
    .badReasonBox{
        height: 50rem;
    }
    .editBtn{
        color: rgba(0, 0, 255, 0.719);
        cursor: pointer;
    }
    .createBtn{
        width: 5.5rem;
        height: 2.4rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0.6rem;
        border: 1px solid #ccc;
        margin: 1rem 0 -1rem 1.5rem;
        cursor: pointer;
    }
    .secBoxInput{
        width: 100%;
        height: 15rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .saveBtn{
        margin: 3rem auto;
        width: 10rem;
        height: 3rem;
        background: #7e6b5a;
        color: #FFF;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 1.5rem;
        cursor: pointer;
    }
</style>
